<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>18.12 父子组件通信-子与父通信 </title>

	<style>
		input[type="text"] {
			height: 30px;
			width: 300px;
			margin-bottom: 10px;
			border-radius: 5px;
			padding: 2px;
			font-size: 16px;

		}

		div {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		button {
			width: 180px;
			height: 100px;
			/* text-align: right; */
			position: relative;
			font-size: 16px;
		}

		button:hover {
			cursor: pointer;
		}

		input {
			height: 36px;

		}

		pre {
			background-color: beige;
			display: inline-block;
		}

		button>img {
			width: 100px;
			height: 95px;

			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;

		}
	</style>

</head>

<body>


	<div id="app">
		<!-- 这里定义一个父组件  -->
		<banlance></banlance>
	</div>



	<!--  父组件  给template 一个id  -->
	<template id="banlance-tpl">
		<div>
			<!-- 子组件 -->
			<!-- 监听自定义的事件 -->
			<show @show-balance="get_banlance"></show>
			<div v-if="is_show">
				你的余额为: {{balance}}
			</div>
		</div>
	</template>



	<!--子组件 template id-->
	<template id="show-balance-tpl">
		<button @click="on_click">显示余额</button>
	</template>



	<script src="../lib/vue.js"></script>
	<script src="js/main.js"></script>

</body>

</html>